<extend name="Public/layout" />
<block name="body">
    <link rel="stylesheet" href="/Public/Wap/css/e.css">
    <link rel="stylesheet" href="/Public/Wap/css/ec.css">
    <script src="/Public/Wap/js/vue.js"></script>
    <script src="/Public/Wap/js/e.js"></script>
    <link rel="stylesheet" href="/Public/Wap/css/dy/index.css">

    <div style="margin-top: 40px" id="vmRoot" class="vm-container">
        <!-- <div class="card-box">
        </div> -->
        <div class="card-box1">
            <div class="ui-flex data-show-wrap">
                <div class="data-show-item">
                    <div class="data-show-num">{{ bdata.total_goods_daipaiqi || '0' }}</div>
                    <div class="data-show-title">待排期商品</div>
                </div>
                <div class="data-show-item">
                    <div class="data-show-num">{{ bdata.total_goods_over || '0' }}</div>
                    <div class="data-show-title">结束商品</div>
                </div>
                <div class="data-show-item">
                    <div class="data-show-num">{{ bdata.total_mouth || '0' }}</div>
                    <div class="data-show-title">本月总数据</div>
                </div>
                <div class="data-show-item">
                    <div class="data-show-num">{{ bdata.total_mouth_settling || '0' }}</div>
                    <div class="data-show-title">本月待结算</div>
                </div>
                <div class="data-show-item">
                    <div class="data-show-num">{{ bdata.total_mouth_settled || '0' }}</div>
                    <div class="data-show-title">本月已结算</div>
                </div>
            </div>
        </div>
        <div class="card-box1" style="margin-top:15px">
            <el-radio-group v-model="statusType" @change="handleStateChange">
                <el-radio-button label="0">待审核({{ bdata.total_dengdai || 0 }})</el-radio-button>
                <el-radio-button label="6">待推广({{ bdata.total_dengdai_promote || 0 }})</el-radio-button>
                <el-radio-button label="1">待排期({{ bdata.total_daipaiqi || 0 }})</el-radio-button>
                <el-radio-button label="2">进行中({{ bdata.total_going || 0 }})</el-radio-button>
                <el-radio-button label="3">已结束({{ bdata.total_over || 0 }})</el-radio-button>
                <el-radio-button label="4">已结算({{ bdata.total_settle || 0 }})</el-radio-button>
                <el-radio-button label="5">已拒绝({{ bdata.total_refuse || 0 }})</el-radio-button>
            </el-radio-group>
        </div>
        <div class="card-box tb-list" style="padding:0;">
            <el-table :data="pages.list" style="width: 100%" v-loading="pages.loading"
                :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column align="" header-align="" label="产品图片" width="220">
                    <div class="ui-flex" slot-scope="scope">
                        <el-image style="width: 80px; height: 80px" :src="scope.row.pic_url" fit="fit">
                        </el-image>
                        <div class="ui-flex-lt ui-flex-1" style="margin-left: 5px;">
                            <a :href="scope.row.goods_url" target="_black" class="ui-nowrap-flex"
                                style="color: inherit;">{{ scope.row.goods_title }}</a>
                            <div>销量:{{ scope.row.sales }}+</div>
                            <a :href="scope.row.serller_url" target="_black" class="ui-nowrap-flex"
                                style="color: inherit;">{{ scope.row.seller_name }}</a>
                        </div>
                    </div>
                </el-table-column>
                <el-table-column align="center" label="排期时间" width="100">
                    <div class="ui-flex" slot-scope="scope"> {{ scope.row.start_time }} <br>至<br>
                        {{ scope.row.end_time }} </div>
                </el-table-column>
                <el-table-column align="left" label="活动信息" sortable>
                    <div class="ui-flex" slot-scope="scope">
                        活动ID:{{ scope.row.activity_code }} <br>
                        提交时间:{{ scope.row.create_time }}
                    </div>
                </el-table-column>
                <el-table-column align="left" label="价格" width="110">
                    <div class="ui-flex" slot-scope="scope">
                        折后价:{{ scope.row.zk_final_price }} <br>
                        券金额:{{ scope.row.coupon_price }} <br>
                        券后价:{{ scope.row.coupon_back_price }} <br>
                    </div>
                </el-table-column>
                <el-table-column prop="coupon_url" align="center" label="券链接">
                    <div slot-scope="scope">
                        <a v-if="scope.row.coupon_url" :href="scope.row.coupon_url" target="_blank">点击跳转</a>
                    </div>
                </el-table-column>
                <el-table-column align="center" label="券图" width="80">
                    <div slot-scope="scope">
                        <a v-if="scope.row.coupon_pic" @click="openWin(scope.row.coupon_pic)">
                            <el-image style="width: 80px; height: 80px" :src="scope.row.coupon_pic" fit="fit">
                            </el-image>
                        </a>
                    </div>
                </el-table-column>
                <el-table-column align="left" label="佣金/服务费" width="110">
                    <div class="ui-flex" slot-scope="scope">
                        佣金比例:{{ scope.row.reward_radio }}% <br>
                        服务费:{{ scope.row.service_radio }}%
                    </div>
                </el-table-column>

                <el-table-column align="center" label="结束图" width="80">
                    <div slot-scope="scope">
                        <a v-if="scope.row.over_pic" @click="openWin(scope.row.over_pic)">
                            <el-image style="width:50px;height:50px" :src="scope.row.over_pic" fit="fit">
                            </el-image>
                        </a>
                    </div>
                </el-table-column>
                <el-table-column prop="over_data" label="结束数据" width="80"></el-table-column>
                <el-table-column align="center" label="总费用收款图" width="80">
                    <div slot-scope="scope">
                        <a v-if="scope.row.total_money_pic" @click="openWin(scope.row.total_money_pic)">
                            <el-image style="width: 80px; height: 80px" :src="scope.row.total_money_pic" fit="fit">
                            </el-image>
                        </a>
                    </div>
                </el-table-column>
                <!--<el-table-column prop="total_money" label="总费用"></el-table-column>-->
                <el-table-column align="center" label="支出费用图片" width="80">
                    <div slot-scope="scope">
                        <a v-if="scope.row.zhichu_pic" @click="openWin(scope.row.zhichu_pic)">
                            <el-image style="width: 80px; height: 80px" :src="scope.row.zhichu_pic" fit="fit">
                            </el-image>
                        </a>
                    </div>
                </el-table-column>
                <!--<el-table-column prop="zhichu_money" label="支出费用"></el-table-column>-->
                <!--<el-table-column prop="jieyu_money" label="结余款"></el-table-column>-->

                <el-table-column align="left" label="费用" width="110">
                    <div class="ui-flex" slot-scope="scope">
                        总费用:{{ scope.row.total_money }} <br>
                        支出总费用:{{ scope.row.zhichu_money }}
                        结余款:{{ scope.row.jieyu_money }}
                    </div>
                </el-table-column>

                <el-table-column label="操作" align="center" width="110">
                    <div class="list-btn-box" slot-scope="scope">
                        <el-button v-if="scope.row.is_edit == 1" size="mini" type="primary" plain
                            @click="goEdit(scope.row)">编辑活动 </el-button>
                        <template v-for="(n, i) in scope.row.btn">
                            <el-button v-if="n.status == 1" :key="i" size="mini" type="primary" plain
                                @click="dealBtn(n, scope.row)">{{ n.text }}</el-button>
                        </template>

                        <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    </div>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="main-pagination">
                <el-pagination @size-change="pageSizeChange" @current-change="pageChange" background
                    :page-size="pages.page_size" :page-sizes="[10, 50, 100]" layout="prev, pager, next,sizes, jumper"
                    :total="pages.total">
                </el-pagination>
            </div>
        </div>
        <!--  -->
        <el-dialog title="拒绝" :visible.sync="pop.refuse.show">
            <el-form label-width="140px">
                <el-form-item label="拒绝原因">
                    <el-input type="textarea" v-model="pop.refuse.data.refuse_reason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop.refuse.show = false">取 消</el-button>
                <el-button type="primary" @click="setReject">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 确认排期 -->
        <el-dialog title="确认排期" :visible.sync="pop.schedue.show">
            <el-form label-width="140px">
                <el-form-item label="排期时间">
                    <el-col :span="11">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择开始时间"
                            v-model="pop.schedue.data.start_time" style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择结束时间"
                            v-model="pop.schedue.data.end_time" style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop.schedue.show = false">取 消</el-button>
                <el-button type="primary" @click="setSchedue">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 立即推广 -->
        <el-dialog title="立即推广" :visible.sync="pop.share.show">
            <el-form label-width="140px">
                <el-form-item label="券金额">
                    <el-input v-model="pop.share.data.coupon_price"></el-input>
                </el-form-item>
                <el-form-item label="券链接">
                    <el-input v-model="pop.share.data.coupon_url"></el-input>
                </el-form-item>
                <el-form-item label="券后价">
                    <el-input v-model="pop.share.data.coupon_back_price"></el-input>
                </el-form-item>
                <el-form-item label="券图">
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile1">
                        <img v-if="pop.share.data.coupon_pic" :src="pop.share.data.coupon_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop.share.show = false">取 消</el-button>
                <el-button type="primary" @click="setShare">确 定</el-button>
            </div>
        </el-dialog>

        <!--结束操作  -->
        <el-dialog title="结束操作" :visible.sync="pop.end.show">
            <el-form label-width="140px">
                <el-form-item label="结束数据">
                    <el-input v-model="pop.end.data.over_data"></el-input>
                </el-form-item>
                <el-form-item label="结束图">
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile2">
                        <img v-if="pop.end.data.over_pic" :src="pop.end.data.over_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop.end.show = false">取 消</el-button>
                <el-button type="primary" @click="setEnd">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 结算操作 -->
        <el-dialog title="结算操作" :visible.sync="pop.count.show">
            <el-form label-width="140px">
                <el-form-item label="总费用">
                    <el-input v-model="pop.count.data.total_money"></el-input>
                </el-form-item>
                <el-form-item label="总费用收款图">
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile3">
                        <img v-if="pop.count.data.total_money_pic" :src="pop.count.data.total_money_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="支出费用">
                    <el-input v-model="pop.count.data.zhichu_money"></el-input>
                </el-form-item>
                <el-form-item label="支出费用图片">
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile4">
                        <img v-if="pop.count.data.zhichu_pic" :src="pop.count.data.zhichu_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop.count.show = false">取 消</el-button>
                <el-button type="primary" @click="setCount">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        new Vue({
            el: '#vmRoot',
            data: function () {
                return {
                    label: 3,
                    bdata: {

                    },
                    statusType: '1',
                    pages: {
                        loading: true,
                        list: [],
                        page_size: 10,
                        page_num: 0,
                        total: 0,
                        page: {}
                    },
                    pop: {
                        row: null,
                        refuse: {
                            show: false,
                            data: {
                                refuse_reason: ''
                            }
                        },
                        schedue: {
                            show: false,
                            data: {
                                start_time: '', //		开始时间
                                end_time: '', //		结束时间
                            }
                        },
                        share: {
                            show: false,
                            data: {
                                coupon_url: '', //		优惠券链接
                                coupon_price: '', //		券金额
                                coupon_back_price: '', //		券后价
                                coupon_pic: '', //		券图
                            }
                        },
                        end: {
                            show: false,
                            data: {
                                over_data: '', //		结束数据
                                over_pic: '', //		结束图
                            }
                        },
                        count: {
                            show: false,
                            data: {
                                total_money: '', //总费用
                                total_money_pic: '', //总费用收款图
                                zhichu_money: '', // 支出费用
                                zhichu_pic: '', //支出费用图片
                            }
                        },

                    }
                }
            },
            created() {

            },
            methods: {
                getList(params) {
                    console.log(this.statusType, 66)
                    let that = this;
                    that.pages.loading = true;
                    let param = {
                        state: that.statusType,
                        page_size: that.pages.page_size
                    }
                    Object.assign(param, that.postData)
                    if (params) {
                        Object.assign(param, params)
                    }
                    $.post('{:U("/kcadmin/dy/activityGoodsData")}', param, function (res) {
                        that.pages.loading = false;
                        if (res.code == 1) {
                            that.pages.list = res.data.list;
                            that.pages.page_num = res.data.page_num;
                            that.pages.total = Number(res.data.page_count);
                            that.bdata = res.data;
                        }
                    })
                },
                handleStateChange() {
                    this.getList();
                },
                pageSizeChange(val) {
                    let that = this;
                    that.pages.page_size = val;
                    that.getList()
                },
                pageChange(val) {
                    let that = this;

                    that.getList({
                        page_num: val
                    })
                },
                goEdit(row) {
                    console.log(row)
                    location.href = '{:U("/kcadmin/dy/edit") }?edit=1&id=' + row.id;
                },
                openWin(url) {
                    window.open(url)
                },
                dealBtn(item, row) {
                    let that = this;
                    // that.$confirm('是否确认' + item.text + '?', '提示', {
                    //     confirmButtonText: '确定',
                    //     cancelButtonText: '取消',
                    //     type: 'warning'
                    // }).then(() => {
                    //     $.post(location.origin + '/kcadmin/' + item.url, { id: row.id }, function (res) {
                    //         if (res.code == 200) {
                    //             that.$message({
                    //                 message: '操作成功',
                    //                 type: 'success'
                    //             });
                    //         } else {
                    //             that.$message.error(res.msg);
                    //         }
                    //     })
                    // }).catch(() => {

                    // });
                    that.pop.row = row;
                    switch (item.url) {
                        //立即推广
                        case 'activityPromote':
                            that.pop.share.show = true;
                            break;
                            //结束操作
                        case 'activityOver':
                            that.pop.end.show = true;
                            break;
                            //结算操作
                        case 'activitySettle':
                            that.pop.count.show = true;
                            break;
                            //拒绝操作
                        case 'activityRefuse':
                            that.pop.refuse.show = true;
                            break;
                            //通过操作
                        case 'activityPass':
                            that.setPass();
                            break;
                            //排期操作
                        case 'activityPaiqi':
                            that.pop.schedue.show = true;
                            break;

                    }

                },
                upXml(file, func) {
                    let data = new FormData();
                    data.append('kcs_uploader_file', file);

                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            console.log(xhr.responseText);
                            console.log('####');

                            var data = JSON.parse(xhr.responseText).data;
                            var ecode = JSON.parse(xhr.responseText).error_code;

                            // console.log(data)
                            if (ecode == 0) {
                                console.log(data.avatar_url)
                                func(data.avatar_url)
                                // that.postData.avatar = data.avatar_url
                            }
                        }
                    };
                    xhr.open('POST', ("http://" + location.hostname) + '/api/Upload');
                    xhr.send(data)
                },
                uploadFile1(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.pop.share.data.coupon_pic = url
                    })

                    return false;
                },
                uploadFile2(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.pop.end.data.over_pic = url
                    })

                    return false;
                },
                uploadFile3(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.pop.count.data.total_money_pic = url
                    })

                    return false;
                },
                uploadFile4(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.pop.count.data.zhichu_pic = url
                    })

                    return false;
                },
                //通过操作
                setPass() {
                    let that = this;
                    let postData = {};
                    postData.id = that.pop.row.id;
                    that.$confirm('是否确认通过?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post('{:U("/kcadmin/Dy/activityPass")}', postData, function (res) {
                            console.log(res)
                            if (res.code == 200) {
                                that.$message({
                                    message: '已通过',
                                    type: 'success'
                                });
                            } else {
                                that.$message.error(res.msg);
                            }
                        })
                    }).catch(() => {});
                },
                //拒绝操作
                setReject() {
                    let that = this;
                    let postData = that.pop.refuse.data;
                    postData.id = that.pop.row.id;
                    $.post('{:U("/kcadmin/Dy/activityRefuse")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '已拒绝',
                                type: 'success'
                            });
                            that.pop.refuse.show = false;
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                //确定排期
                setSchedue() {
                    let that = this;
                    let postData = that.pop.schedue.data;
                    postData.id = that.pop.row.id;
                    $.post('{:U("/kcadmin/Dy/activityPaiqi")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '已确定排期',
                                type: 'success'
                            });
                            that.pop.schedue.show = false;
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                //立即推广
                setShare() {
                    let that = this;
                    let postData = that.pop.share.data;
                    postData.id = that.pop.row.id;
                    $.post('{:U("/kcadmin/Dy/activityPromote")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '设置推广成功',
                                type: 'success'
                            });
                            that.pop.share.show = false;
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                //结束操作
                setEnd() {
                    let that = this;
                    let postData = that.pop.end.data;
                    postData.id = that.pop.row.id;
                    $.post('{:U("/kcadmin/Dy/activityOver")}', postData, function (res) {
                        if (res.code == 200) {
                            that.$message({
                                message: '设置结束成功',
                                type: 'success'
                            });
                            that.pop.end.show = false;
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                //结算操作
                setCount() {
                    let that = this;
                    let postData = that.pop.count.data;
                    postData.id = that.pop.row.id;
                    $.post('{:U("/kcadmin/Dy/activitySettle")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '设置成功',
                                type: 'success'
                            });
                            that.pop.count.show = false;
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                }
            },
            mounted() {
                var idArray = window.location.search.split("=");
                console.log(idArray, 66)

                this.statusType = idArray[1]
                this.getList()
            }
        })
    </script>
</block>